<template>
	<div id="detail">
		<DetailNavBar class="detail-nav" @titleClick="titleClick" ref="nav"></DetailNavBar>
		<Scroll class="content" ref="scroll" @scroll="contentScroll">
			<detail-swiper :topimages="topimages"></detail-swiper>
			<DetailBaseInfo :goods="Goods"></DetailBaseInfo>
			<DetailShopInfo :shop="shop"></DetailShopInfo>
			<DetailGoodsInfo :detail-info="detailInfo" @imageLoad="imageLoad"></DetailGoodsInfo>
			<DetailParamInfo ref="params" :param-info="paramInfo"></DetailParamInfo>
			<DetailCommentInfo ref="comment" :comment-info="commentInfo"></DetailCommentInfo>
			<GoodsList  ref="recommend" :goods="recommends"></GoodsList>
		</Scroll>
		<DetailBottomBar @addCart="addtocart"></DetailBottomBar>
		<back-top @click.native="backClick" v-show="isshow"></back-top>
		<toast 	:message="message" :show="isshow"></toast>
	</div>
</template>

<script>
	import DetailNavBar from './childComps/DetailNavBar.vue'
	import {getDetail,Goods,Shop,GoodsParam,getRecommend} from '../../netword/detail.js'
	import DetailSwiper from './childComps/DetailSwiper.vue'
	import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
	import DetailShopInfo from './childComps/DetailShopInfo.vue'
	import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
	import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
	import DetailParamInfo from './childComps/DetailParamInfo.vue'
	import Scroll from '../../components/common/scroll/Scroll.vue'
	import GoodsList from '../../components/goods/GoodsList.vue'
	import {debounce} from '../../assets/common/utils.js'
	import DetailBottomBar from './childComps/DetailBottonBar.vue'
	import BackTop from '../../components/backTop/backTop.vue'
	import Toast from '../../components/common/toast/Toast.vue'
	export default{
		name:"detail",
		data(){
			return{
				iid:null,
				topimages:[],
				Goods:{},
				shop:{},
				detailInfo:{},
				isshow:false,
				paramInfo:{},
				commentInfo:{},
				recommends:{},
				themeTopYs:[0,0,0,0],
				getThemeTopY:null,
				currentIndex:0,
				isshow:false,
				message:"",
				isshow:false
			}
		},
		components:{
			DetailNavBar,DetailSwiper,DetailBaseInfo,DetailShopInfo,Scroll,DetailCommentInfo, DetailGoodsInfo
			,DetailParamInfo,GoodsList,DetailBottomBar,BackTop,Toast
		},
		created(){
			this.iid=this.$route.params.iid
			getDetail(this.iid).then(res=>{
				const data=res.result
				this.topimages=data.itemInfo.topImages
				this.Goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
				this.shop=new Shop(data.shopInfo)
				this.detailInfo=data.detailInfo
				this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule);
				if(data.rate.cRate !== 0){
					this.commentInfo =data.rate.list[0]
				}
				// this.$nextTick(()=>{
				// 	this.themeTopYs=[]
				// 	this.themeTopYs.push(0),
				// 	this.themeTopYs.push(this.$refs.params.$el.offsetTop),
				// 	this.themeTopYs.push(this.$refs.comment.$el.offsetTop),
				// 	this.themeTopYs.push(this.$refs.recommend.$el.offsetTop),
				// 	console.log(this.themeTopYs)
				// })
			})
			getRecommend().then(res=>{
				this.recommends=res.data.list
				// console.log(this.recommends)
			})
			this.getThemeTopY=debounce(()=>{
				this.$nextTick(()=>{
					this.themeTopYs=[]
					this.themeTopYs.push(0),
					this.themeTopYs.push(this.$refs.params.$el.offsetTop),
					this.themeTopYs.push(this.$refs.comment.$el.offsetTop),
					this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
					this.themeTopYs.push(Number.MAX_VALUE)
				})
			})
		},
		mounted() {
			this.$refs.scroll.refresh()
		},
		methods:{
			addtocart(){
				const product={}
				product.image=this.topimages[0];
				product.title=this.Goods.title
				product.desc=this.Goods.desc
				product.price=this.Goods.realPrice
				product.iid=this.iid
				// 添加购物车成功
				this.$store.dispatch('addCart',product).then(res=>{
					// this.show=true
					// this.message=res
					// setTimeout(()=>{
					// 	this.show=false,
					// 	this.message=""
					// },1000)
					this.$toast.show(res,1500)
				})
			},
			backClick(){
				this.$refs.scroll.scroll.scrollTo(0,0,1000)
			},
			imageLoad(){
				this.$refs.scroll.refresh()
				this.getThemeTopY()
			},
			titleClick(index){
				// console.log(index)
				this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100)
			},
			contentScroll(position){
				this.isshow=(-position.y)>1000
				// console.log(position)
				const positionY=-position.y
				// for(let i in this.themeTopYs){
				// 	if(positionY>this.themeTopYs[i] && positionY<this.theme)
				// }
				let length=this.themeTopYs.length
				for(let i=0;i<length-1;i++){
					if(this.currentIndex !== i && (positionY>this.themeTopYs[i] && positionY<this.themeTopYs[i+1]))
					{
						this.currentIndex=i
						this.$refs.nav.currentindex=this.currentIndex
					}
				}
			}
		}
	}
</script>

<style scoped>
	#detail{
		position: relative;
		z-index: 9;
		background-color: #fff;
		height: 100vh;
	}
	.content{
		position: relative;
		height: calc(100% - 44px - 49px);
		overflow: hidden;
	}
	.detail-nav{
		position: relative;
		z-index: 99;
		background-color: #fff;
	}
</style>
